<template>
  <view class="settle-in-container">
    <navbar title="申请入驻"></navbar>
    <view class="bg"></view>
    <view class="container">
      <view class="row">
        <view class="label">入驻类型</view>
        <view class="value">
          <picker @change="bindPickerChange" class="f1" :value="type" :range="array">
            <view class="flex h vc">
              <view class="f1" v-if="array[type]">{{ array[type] }}</view>
              <view class="placeholder" v-else>请选择类型</view>
              <image src="../../static/black_back.png" class="arrow"></image>
            </view>
          </picker>
        </view>
      </view>
      <view class="divider"></view>
      <view class="row">
        <view class="label">联系人</view>
        <view class="value">
          <input placeholder="请输入姓名" placeholder-class="placeholder" v-model="contact"/>
        </view>
      </view>
      <view class="divider"></view>
      <view class="row">
        <view class="label">联系电话</view>
        <view class="value">
          <input placeholder="请输入电话号码" placeholder-class="placeholder" v-model="phone"/>
        </view>
      </view>
      <view class="divider"></view>
      <view class="row">
        <view class="label">微信号</view>
        <view class="value">
          <input placeholder="请输入微信号" placeholder-class="placeholder" v-model="wechat"/>
        </view>
      </view>
      <view class="divider"></view>
      <view class="tips">提交资料后会有工作人员主动与您联系</view>
      <view class="btn" @click="submit">提交资料</view>
    </view>
  </view>
</template>
<script>
import Navbar from "../../components/navbar";
import {settleInApi} from "../../api";

export default {
  name: "settle_in",
  components: {Navbar},
  data() {
    return {
      type: -1,
      array: [
        '驾校入驻',
        '教练入驻',
        '抖音主播入驻',
      ],
      contact: null,
      phone: null,
      wechat: null,
    }
  },
  methods: {
    bindPickerChange: function (e) {
      this.type = e.detail.value
    },
    async submit() {
      if (this.type === -1) {
        return uni.showToast({
          title: '请选择类型',
          icon: 'none',
          duration: 2000
        });
      }

      if (!this.contact) {
        return uni.showToast({
          title: '请输入姓名',
          icon: 'none',
          duration: 2000
        });
      }
      if (!this.phone) {
        return uni.showToast({
          title: '请输入电话',
          icon: 'none',
          duration: 2000
        });
      }

      await settleInApi.create(this.type, this.contact, this.phone, this.wechat)
      uni.showToast({
        title: '提交成功，等待客服联系！',
        icon: 'none',
        duration: 2000
      });
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f1f3f7;
  height: 100%;
}

.settle-in-container {
  background-color: #f1f3f7;
  height: 100%;

  .bg {
    background-image: url("http://down.qwdata.vip/app_icon/1687182742334");
    width: 750rpx;
    height: 492rpx;
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 0;
    top: 0;
    left: 0;
  }

  .container {
    width: 690rpx;
    border-radius: 40rpx;
    background-color: #fff;
    top: 400rpx;
    margin-left: 30rpx;
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 10;

    .divider {
      height: 1px;
      margin-left: 36rpx;
      margin-right: 36rpx;
      background-color: #F4F4F4;
    }

    .row {
      display: flex;
      height: 130rpx;
      align-items: center;

      .label {
        width: 200rpx;
        font-size: 16px;
        color: #010101;
        margin-left: 44rpx;
      }

      .value {
        display: flex;
        flex: 1;
        font-size: 16px;
        color: #010101;
      }

      .arrow {
        width: 20rpx;
        height: 20rpx;
        transform: rotate(180deg);
        margin-right: 36rpx;
      }

      ::v-deep .placeholder {
        font-size: 16px;
        color: #B5B5B5;
        flex: 1;
      }
    }

    .tips {
      margin-top: 143rpx;
      font-size: 12px;
      color: #626262;
      text-align: center;
    }

    .btn {
      margin-top: 38rpx;
      background: #4B6EF6;
      border-radius: 46rpx;
      font-size: 16px;
      color: #FFFFFF;
      height: 92rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 44rpx;
      margin-right: 44rpx;
      margin-bottom: 52rpx;
    }
  }
}
</style>
